<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
        <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $(function () {
            $("#tab").bootstrapTable({
                method: "get",
                contentType: "application/json;charset=utf-8",
                url: "/scell/queryScellAll",
                striped: true,
                pageNumber: 1,
                pagination: true,
                sidePagination: 'server',
                pageSize: 5,
                pageList: [3, 5, 6, 10],
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNumber: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,
                    }
                },
                columns: [
                    {title: '配置单编号', field: 'storeId', align: 'center'},
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '配置单状态',field: 'checkTag',align: 'center', formatter: function (value, row, index) {
                            if (value == '审核通过') {
                                return "<span class='btn btn-outline-success'>审核通过</span>";
                            } else if (value == '审核不通过') {

                                return "<span class='btn btn-outline-danger'>审核不通过</span>";
                            }
                        }
                    },
                ]
            })
        })
    </script>
</head>
<body>
<!--<div>-->
<!--    配置单编号:<input type="text">-->
<!--    产品编号：<input type="text">-->
<!--    产品名称:<input type="text">-->
<!--    状态:<select>-->
<!--    <option>待审核</option>-->
<!--    <option>审核通过</option>-->
<!--</select>-->
<!--    <button onclick="$('#tab').bootstrapTable('refresh')">查询</button>-->
<!--</div>-->
<table id="tab">

</table>
</body>
</html>